<template>
  <div id="components-form-demo-advanced-search">
    <a-spin :spinning="loading">
      <a-form class="ant-advanced-search-form" :form="form">
        <a-row>
          <a-col :span="24" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="save">
              {{ $ct("save", "保存") }}
            </a-button>
          </a-col>
        </a-row>
        <a-divider orientation="left"
          ><span class="text-bold">{{
            $ct("systemInfo", "系统信息")
          }}</span></a-divider
        >
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item
              :label="$ct('otherConfig', '系统名称')"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input
                placeholder="系统名称"
                v-decorator="['systemName', { rules: [{ required: true }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label="$ct('systemNameShort', '名称缩写')"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input
                placeholder="名称缩写"
                v-decorator="[
                  'systemNameShort',
                  { rules: [{ required: true, message: '' }] },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label="$ct('systemVersion', '系统版本')"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input
                placeholder="系统版本"
                v-decorator="['systemVersion', { rules: [{ required: true }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label="$ct('systemDate', '系统日期')"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input
                placeholder="系统日期"
                v-decorator="['systemDate', { rules: [{ required: true }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label="$ct('systemLogo', '平台图标')"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input
                placeholder="平台图标"
                v-decorator="['systemLogo', { rules: [{ required: true }] }]"
                type="hidden"
              />
              <t-image-upload
                ref="imageUpload1"
                :isMultiple="false"
                :url="uploadUrl"
                :data="{ bucket: 'yx-cloud-vue' }"
                :limit="1"
                @change="img1Change"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label="$ct('browserIcon', '浏览器图标')"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input
                placeholder="浏览器图标"
                v-decorator="['browserIcon', { rules: [{ required: true }] }]"
                type="hidden"
              />
              <t-image-upload
                ref="imageUpload2"
                :isMultiple="false"
                :url="uploadUrl"
                :data="{ bucket: 'yx-cloud-vue' }"
                :limit="1"
                @change="img2Change"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              :label="$ct('systemExplain', '系统说明')"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-textarea
                placeholder="系统说明"
                v-decorator="['systemExplain']"
                :auto-size="{ minRows: 3, maxRows: 3 }"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-divider orientation="left"
          ><span class="text-bold">{{
            $ct("companyInfo", "公司信息")
          }}</span></a-divider
        >
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item
              :label="$ct('companyName', '公司名称')"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input
                placeholder="公司名称"
                v-decorator="['companyName', { rules: [{ required: true }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label="$ct('companyWebsite', '公司官网')"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-input
                placeholder="公司官网"
                v-decorator="[
                  'companyWebsite',
                  { rules: [{ required: true }] },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              :label="$ct('companyExplain', '公司说明')"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-textarea
                placeholder="公司说明"
                v-decorator="['companyExplain']"
                :auto-size="{ minRows: 3, maxRows: 3 }"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </div>
</template>
<script>
import pick from "lodash.pick";
import { TImageUpload } from "@/components";
// import imgUpload from "./imgUpload.vue";
// 表单字段
const fields = [
  "systemName",
  "systemLogo",
  "systemVersion",
  "systemDate",
  "systemNameShort",
  "browserIcon",
  "systemExplain",
  "companyName",
  "companyWebsite",
  "companyExplain",
];
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}
export default {
  components: {
    TImageUpload,
  },
  data() {
    return {
      labelCol: {
        flex: "100px",
      },
      wrapperCol: {
        flex: "auto",
      },
      form: this.$form.createForm(this),
      model: {},
      loading: false,
      uploadUrl: "/document/minio/uploadfile",
    };
  },
  created() {
    fields.forEach((v) => this.form.getFieldDecorator(v));
    this.$post("/system/config/selectAll", {}).then((res) => {
      res.forEach((item) => {
        this.$set(this.model, item.code, item.value);
      });
      this.$refs.imageUpload1.fileList = [
        {
          url: this.model["systemLogo"],
          uid: "1",
          name: "image.png",
          status: "done",
        },
      ];
      this.$refs.imageUpload2.fileList = [
        {
          url: this.model["browserIcon"],
          uid: "2",
          name: "image.png",
          status: "done",
        },
      ];
      this.$refs.imageUpload1.picUrl = true;
      this.$refs.imageUpload2.picUrl = true;
      this.form.setFieldsValue(pick(this.model, fields));
    });
  },
  methods: {
    img1Change() {
      let url = this.$refs.imageUpload1.fileList[0].url;
      this.form.setFieldsValue({ systemLogo: url });
    },
    img2Change() {
      let url = this.$refs.imageUpload2.fileList[0].url;
      this.form.setFieldsValue({ browserIcon: url });
    },
    save() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true;
          let param = [];
          for (let key in values) {
            param.push({
              code: key,
              value: values[key],
            });
          }
          this.$post("/system/config/save", {
            param: JSON.stringify(param),
          }).then((res) => {
            this.$message.success(res.message);
            this.loading = false;
          });
        } else {
          this.$message.warning("请将信息填写完整！");
        }
      });
    },
    handleChange(info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.imageUrl = imageUrl;
          this.loading = false;
        });
      }
    },
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("You can only upload JPG file!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("Image must smaller than 2MB!");
      }
      return isJpgOrPng && isLt2M;
    },
  },
};
</script>
<style lang="less" scoped>
.ant-advanced-search-form {
  padding: 0 24px;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
/deep/.ant-form-explain {
  display: none !important;
}
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
